﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>TextBoxList编辑器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    <script src="../../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../scripts/miniui/miniui.js" type="text/javascript"></script>
    <link href="../../scripts/miniui/themes/default/miniui.css" rel="stylesheet" type="text/css" />
    <link href="../../scripts/miniui/themes/icons.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .New_Button, .Edit_Button, .Delete_Button, .Update_Button, .Cancel_Button
        {
            font-size:11px;color:#1B3F91;font-family:Verdana;  
            margin-right:5px;
        }
       
                
    </style>        
</head>
<body>
    <h1>TextBoxList编辑器</h1>      

    <input type="button" value="edit" onclick="editRow()"/>
    <input type="button" value="cancel" onclick="cancelRow()"/>
    <input type="button" value="save" onclick="saveRow()"/>
<div id="datagrid1" class="mini-datagrid" style="width:700px;height:250px;"  allowResize="true"
    url="../data/AjaxService.jsp?method=SearchEmployees"  idField="id"
    oncellbeginedit="onCellBeginEdit"
>
    <div property="columns">
        <div type="indexcolumn"></div>
        <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号            
        </div>                
          
        <div field="country" width="200" allowSort="true" renderer="onCountryRenderer">国家
           <input property="editor" class="mini-textboxlist" required="true" style="width:100%;"
                 url="../data/AjaxService.jsp?method=FilterCountrys" 
           />
        </div>
    </div>
</div>    
    
    <script type="text/javascript">
        mini.parse();
        
        var grid = mini.get("datagrid1");
        grid.load();
        grid.sortBy("createtime", "desc");



        ///////////////////////////////////////////////////////
        var Countrys = [
            { id: "usa", text: "美国" },
            { id: "cn", text: "中国" },
            { id: "jp", text: "日本" },
            { id: "en", text: "英国" },
            { id: "de", text: "德国" },
            { id: "fr", text: "法国" },
	        { id: "ca", text: "加拿大" },
	        { id: "at", text: "奥地利" },
	        { id: "ch", text: "瑞士" }
        ];
        function GetCountry(id) {
            for (var i = 0, l = Countrys.length; i < l; i++) {
                var c = Countrys[i];
                if (c.id == id) return c.text;
            }
            return "";
        }
        function onCountryRenderer(e) {
            return GetCountry(e.record.country);
        }

        ///////////////////////////////
        function onCellBeginEdit(e) {
            if (e.field == "country") {
                var id = e.record.country;
                var text = GetCountry(id);
                //初始化textboxlist
                var textboxlist = e.editor;
                
                textboxlist.setValue(id);
                textboxlist.setText(text);
            }
        }

        function editRow() {
            var row = grid.getSelected();
            if (row) {
                grid.cancelEdit();
                grid.beginEditRow(row);
            } else {
                alert("请选中记录");
            }

        }
        function cancelRow() {
            grid.reload();
        }
        function saveRow() {
            var data = grid.getEditData();

            alert("国家:" + data[0].country);
            
        }

    </script>

    <div class="description">
        <h3>Description</h3>
        
    </div>
</body>
</html>